<template>
	<view class="box">
		<view class="flex mt-10" v-for="item,index in list" :key="index">
			<view class="left flexColumn">
				<view class="hint"></view>
				<view class="xian"></view>
			</view>
			<view class="right ml-40">
				<view class="name">{{item.remark}}</view>
				<view class="time" v-if="item.leaveTime - item.accessTime > 0">访问时长：{{item.leaveTime - item.accessTime}}s</view>
				<view class="time" v-if="item.leaveTime - item.accessTime < 0">访问时长：---</view>
				<view class="flex flexSbetween">
					<view class="date">{{item.create_at}}</view>
					<view class="date">{{item.ip}}</view>
				</view>
			</view>
		</view>
		<view class="hint" v-if="list.length > 0"></view>
		<view class="noData" v-if="list.length == 0">
			<image :src="getNoData()"></image>
			<view class="notText">暂无浏览记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				id:'',
				pageNum:'',
				page:1
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getList()
		},
		methods: {
			getList(){
				let data={
					id:this.id,
					page:this.page,
					pageSize:10
				}
				this.api.get('api/file/access',data).then(res=>{
					if(res.code == 200){
						this.pageNum = res.data.last_page
						res.data.data.forEach(item=>{
							item.accessTime = new Date(item.access_time).getTime() / 1000
							item.leaveTime = new Date(item.leave_time).getTime() / 1000
						})
						this.list = this.list.concat(res.data.data)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		},
		onReachBottom() {
			if (this.page < this.pageNum) {
				uni.showLoading({
					title: '加载中'
				})
				setTimeout(() => {
					uni.hideLoading({})
					this.page = this.page + 1
					this.getList() //页面上拉调用这个方法
				}, 1000)
			} else {
				uni.showToast({
					title: '我已经到底了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.box{
		margin: 100rpx 30rpx;
	}
	.hint{
		background: #999;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		margin-bottom: 10rpx;
	}
	.right{
		flex: 1;
	}
	.name{
		font-size: 30rpx;
		color: #333;
	}
	.time{
		font-size: 26rpx;
		color: #333;
		padding: 20rpx 0;
	}
	.date{
		font-size: 26rpx;
		color: #999;
	}
	.xian{
		width: 1rpx;
		height: 120rpx;
		background: #999;
	}
</style>